<template>
	<view class="content">
		<!-- 头部区域 -->
		<base-headers :isSearch="false" />

		<!-- 主题区域 -->
		<view class="main">
			<view class="school-info">

				<view class="info-box1">
					<view>
						<image class="box1-left" :src="'/api'+data.firstImage" style="width: 262upx;height: 172upx;">
						</image>
					</view>
					<view class="box1-right">
						<view class="right-school-name">
							{{data.schoolName}}
						</view>
						<view class="right-school-comment">
							学校性质 {{data.schoolNature}}
						</view>
						<view class="right-school-icon">
							<view v-for="item in data.label" :key="item" class="school-icon">
								{{item}}
							</view>
						</view>
					</view>
				</view>

				<view class="info-box2">

					<view class="address-left">
						<view class="address-info">
							{{data.schoolAddress}}
						</view>
						<!-- <view class="address-distance">
								距您7.9km
							</view> -->
					</view>
					<view class="address-right" style="background-image: url('../../static/组2.jpg');">
						<view class="right-box">
							<image src="/static/g5.png" style="width: 30upx;height: 30upx;"></image>
						</view>
						<view class="right-box">
							<image src="/static/g6.png" style="width: 30upx;height: 30upx;"></image>
						</view>
					</view>

				</view>

				<view class="info-box3">
					<image :src="'/api'+data.firstImage" style="width: 704upx;height: 423upx;border-radius: 12upx;">
					</image>
				</view>

				<!-- 学校简介 -->
				<view class="info-box4">
					<view class="box4-title">
						学校简介
					</view>
					<view class="box4-text">
						<text :class="textHidden?'box4-text-hidden':''">{{data.synopsis}}</text>
						<text class="box4-all" @click="changeHidden">{{textHidden?'查看全部':'收起'}}</text>
					</view>

				</view>
				<!-- 学校官网 -->
				<view class="info-box5">
					<view class="box5-title">
						学校官网
					</view>
					<view class="box5-text">
						{{data.officialAddress}}
					</view>
				</view>
			</view>
		</view>

		<!-- 空白分隔栏 -->
		<view class="blank">

		</view>


		<!-- 校园风光 -->
		<view class="school-view">
			<view class="school-view-title">
				校园风光
			</view>
			<view class="school-view-body">
				<image v-for="item in data.image" :key="item" :src="'/api'+item"
					style="width: 230upx;height: 230upx;border-radius: 12upx;">
				</image>
			</view>
		</view>

		<!-- 空白分隔栏 -->
		<view class="blank">

		</view>

		<!-- tab切换部分 -->
		<view class="tab">
			<!-- 内容切换 -->
			<!-- 内部切换栏 -->
			<view class="coloege-bar">
				<view class="title-box">
					<text class="bar-title" @click="onChangeBar" data-id="1" data-name="院校新闻"
						:class="isBar == 1? 'title-active':''">院校新闻</text>
					<text class="bar-subtitle" :class="isBar == 1? 'active':''">院校新闻</text>
				</view>
				<view class="title-box">
					<text class="bar-title" @click="onChangeBar" data-id="2" data-name="招生信息"
						:class="isBar ==2? 'title-active':''">招生信息</text>
					<text class="bar-subtitle" :class="isBar == 2? 'active':''">招生信息</text>
				</view>
				<view class="title-box">
					<text class="bar-title" @click="onChangeBar" data-id="3" data-name="院校视频"
						:class="isBar ==3 ? 'title-active':''">院校视频</text>
					<text class="bar-subtitle" :class="isBar == 3? 'active':''">直观感受</text>
				</view>
			</view>
			<!-- 内容 -->
			<view>
				<view class="classroom-body" v-for="item in ArticleList" :key="item.id" @click="toNewDetile(item.id)">
					<view class="classroom-body-left">
						<image :src="'https://fetv.cn/fetv-api'+item.image"
							style="width: 262upx;height: 147upx;border-radius: 12upx;">
						</image>
					</view>
					<view class="classroom-body-right">
						<view class="body-right-title">
							{{item.title}}
						</view>
						<view class="body-right-number">
							{{item.browseNum}}播放
						</view>
					</view>
				</view>
				<loading-more :isMore="isMore" @click.native="getMore" />
			</view>
		</view>
		<top-button :top="top" />
	</view>
</template>

<script>
	import {
		findSchool,
		findSchoolArticleList
	} from '../../api/school';
	import {
		debounce
	} from '../../utils/util';
	export default {
		data() {
			return {
				data: {},
				textHidden: true,
				isBar: 1,
				top: 0,
				isMore: 0,
				params: {
					pageNum: 1,
					pageSize: 4,
					typeName: '院校新闻',
				},
				ArticleList: [],
				total: 0
			}
		},
		methods: {
			toNewDetile(id) {
				uni.navigateTo({
					url: '../../subpages/news-detail/news-detail?id=' + id
				})
			},
			changeHidden() {
				this.textHidden = !this.textHidden
			},
			onChangeBar(e) {
				this.isBar = e.currentTarget.dataset.id
				this.params.typeName = e.currentTarget.dataset.name
				this.params.pageNum = 1
				this.ArticleList.splice(0)
				this.getData(this.params)
			},
			getData(data) {
				this.isMore = 1
				findSchoolArticleList(data).then(res => {
					this.total = res.total
					if (data.pageNum == 1) {
						this.ArticleList = res.rows
					} else {
						this.ArticleList = this.ArticleList.concat(...res.rows)
					}
					if (this.total <= this.params.pageNum * this.params.pageSize) {
						this.isMore = 2
					} else {
						this.isMore = 0
					}
				})
			},
			getMore() {
				this.isMore = 1
				if (this.params.pageNum * 10 < this.total) {
					this.params.pageNum++
					this.getData(this.params)
				} else {
					this.isMore = 2
				}
			}
		},
		onPageScroll(e) {
			debounce(() => {
				this.top = e.scrollTop
			})
		},
		onReachBottom() {
			this.getMore()
		},
		onLoad(e) {
			findSchool({
					schoolId: e.id
				}).then(res => {
					this.data = res.data
					if (res.data.label) {
						this.data.label = res.data.label.split(',')
					}
					if (res.data.image) {
						this.data.image = res.data.image.split(',')
					}
				}),

				this.params.schoolId = e.id
			this.getData(this.params)
		},
	}
</script>

<style lang="scss" scoped>
	page {
		padding: 0;
		margin: 0;
	}

	// 头部区域
	.header {
		position: relative;
		height: 149upx;
		width: 750upx;
		background-color: #BA0825;

		.logo {
			position: absolute;
			top: 33upx;
			left: 29upx;

			.logo-img {
				width: 116upx;
			}
		}

		.title-text {
			position: absolute;
			top: 30upx;
			left: 162upx;

			.title {
				width: 346px;
				height: 30upx;
				font-size: 30upx;
				font-family: Noto Sans S Chinese;
				font-weight: bold;
				color: #FFDCAB;
				line-height: 58upx;
			}

			.text1 {
				height: 32upx;
				font-size: 22upx;
				font-family: Noto Sans S Chinese;
				font-weight: 400;
				color: #FFDCAB;
				line-height: 13upx;
				opacity: 0.5;
			}
		}

		.header-right-img {
			position: absolute;
			right: 40upx;
			bottom: 51upx;
		}

	}

	// 主体部分

	.main {
		display: flex;
		flex-direction: column;
		width: 704upx;
		margin-left: 21upx;
		margin-top: 30upx;

		.school-info {

			// box1
			.info-box1 {
				display: flex;

				.box1-left {
					flex: 1;
					border: 1px solid #EEEEEE;
					border-radius: 8px;
					width: 262upx;
					height: 172upx;
					margin-right: 30upx;
				}

				.box1-right {
					display: flex;
					flex-direction: column;

					.right-school-name {
						font-size: 36upx;
						font-family: Noto Sans S Chinese;
						font-weight: bold;
						color: #272727;
					}

					.right-school-comment {
						font-size: 26upx;
						font-family: Noto Sans S Chinese;
						font-weight: 400;
						color: #676767;
						margin: 20upx 0;
					}

					.right-school-icon {
						font-size: 22upx;
						font-family: Noto Sans S Chinese;
						font-weight: 400;
						color: #BA0825;
						display: flex;

						.school-icon {
							margin-right: 10upx;
							padding: 4upx 10upx;
							background-color: rgba(186, 8, 37, 0.15);
							border-radius: 4px;
							white-space: nowrap;
						}
					}
				}
			}

			// box2
			.info-box2 {
				display: flex;
				width: 100%;
				margin-top: 20upx;

				.address-left {
					display: flex;
					flex-direction: column;
					justify-content: center;
					flex: 5;

					.address-info {
						width: 400upx;
						font-size: 28upx;
						font-family: Noto Sans S Chinese;
						font-weight: 400;
						color: #000000;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.address-distance {
						margin-top: 20upx;
						font-size: 25upx;
						font-family: Noto Sans S Chinese;
						font-weight: 400;
						color: #6E6E6E;
					}
				}

				.address-right {
					flex: 3;
					width: 258upx;
					height: 123upx;
					display: flex;
					justify-content: space-around;
					align-items: center;

					.right-box {
						width: 62upx;
						height: 62upx;
						background: #FFFFFF;
						border: 1upx solid #F6F6F6;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}

			// box3
			.info-box3 {
				margin-top: 40upx;

			}

			.info-box4 {
				margin-top: 40upx;

				.box4-title {
					font-size: 34upx;
					font-family: Noto Sans S Chinese;
					font-weight: bold;
					color: #272727;
					margin-bottom: 30upx;
				}

				.box4-text {
					font-size: 29upx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: #757575;

					.box4-text-hidden {
						word-break: break-all;
						/*属性规定自动换行的处理方法。normal(使用浏览器默认的换行规则。),break-all(允许在单词内换行。),keep-all(只能在半角空格或连字符处换行。)*/
						text-overflow: ellipsis;
						display: -webkit-box;
						/** 对象作为伸缩盒子模型显示 **/
						-webkit-box-orient: vertical;
						/** 设置或检索伸缩盒对象的子元素的排列方式 **/
						-webkit-line-clamp: 4;
						/** 显示的行数 **/
						overflow: hidden;
						/** 隐藏超出的内容 **/
					}

				}

				.box4-all {
					font-size: 24upx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: #538CDB;


				}
			}

			.info-box5 {
				margin-top: 40upx;
				padding-bottom: 20upx;

				.box5-title {
					font-size: 34upx;
					font-family: Noto Sans S Chinese;
					font-weight: bold;
					color: #272727;
					margin-bottom: 20upx;
				}

				.box5-text {
					font-size: 28upx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: #3D6CBA;
				}
			}
		}
	}

	// 空白栏
	.blank {
		width: 100%;
		height: 22upx;
		background: #F7F8F9;
		opacity: 0.95;
	}

	//校园风光
	.school-view {
		margin-top: 40upx;
		margin-bottom: 30upx;
		width: 704upx;
		margin-left: 21upx;

		.school-view-title {
			font-size: 34upx;
			font-family: Noto Sans S Chinese;
			font-weight: bold;
			color: #272727;
			margin-bottom: 30upx;
		}

		.school-view-body {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
		}
	}

	//tab切换
	.tab {
		margin-top: 30upx;
		width: 704upx;
		margin-left: 21upx;

		.coloege-bar {
			width: 100%;
			display: flex;
			justify-content: space-around;
		}

		.title-box {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.bar-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #272727;
		}

		.bar-subtitle {
			font-size: 24rpx;
			font-weight: 400;
			color: #989898;
			margin-top: 20rpx;
		}

		.title-active {
			color: #BA0825;
		}

		.active {
			width: 127rpx;
			height: 36rpx;
			color: #FFFFFF;
			background: #BA0825;
			border-radius: 18rpx;
			line-height: 36rpx;
			text-align: center;
		}
	}

	.classroom-body {
		display: flex;
		width: 704upx;
		height: 146upx;
		margin: 21upx 0 21upx 23upx;

		.classroom-body-left {
			width: auto;
			height: 62upx;

		}

		.classroom-body-right {
			margin-left: 21upx;
			height: 62px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.body-right-title {
				font-size: 30upx;
				font-family: Noto Sans S Chinese;
				font-weight: 700;
				color: #000000;
				overflow: hidden;
				line-clamp: 2;
				-webkit-line-clamp: 2;
				display: -webkit-box;
				text-overflow: ellipsis;
				-webkit-box-orient: vertical;
				box-orient: vertical;

			}

			.body-right-number {
				font-size: 24upx;
				font-family: Noto Sans S Chinese;
				font-weight: 400;
				color: #808080;

			}
		}
	}
</style>
